<template>
  <div>
    <BasicTable @register="registerTable">
      <!-- 按钮区 -->
      <!-- 注释 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex justify-center">
            <TableAction :actions="tableActions(record)" />
          </div>
        </template>
      </template>
    </BasicTable>

    <SourceDrawer ref="sourceDrawer" />
  </div>
</template>
<script lang="ts" setup>
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    FormSchema,
    TagRender,
    ActionItem,
  } from '@/components/Table';

  import {  domain } from '@/api/toolkit/genVben';
  import { domainList } from '@/api/toolkit/project';

  import SourceDrawer from '@/learn/SourceDrawer.vue';

  import { ref } from 'vue';

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'TsApi' });

  const sourceDrawer = ref<any>(null);

  // 搜索面板
  const tableSearch: FormSchema[] = [
    {
      field: 'name',
      label: '名称',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'type',
      label: '类型',
      component: 'Select',
      componentProps: {
        options: [
          { label: 'PO', value: 'po' },
          { label: 'DO', value: 'dos' },
          { label: 'VO', value: 'vo' },
          { label: 'Request', value: 'req' },
        ],
        placeholder: '全部',
        onChange: () => reload(),
      },
      colProps: { span: 4 },
    },
  ];

  // 表格列
  const tableColumns: BasicColumn[] = [
    {
      title: '类型',
      dataIndex: 'name',
      width: '10rem',
      align: 'left',
    },
    {
      title: '全称',
      dataIndex: 'canonicalName',
      width: '15rem',
      align: 'left',
    },
    {
      title: '描述',
      dataIndex: 'description',
      width: '12rem',
      align: 'left',
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: '5rem',
      customRender: ({ record }) =>
        TagRender({
          value: record.type,
          items: [
            { text: 'PO', value: 'po', color: 'blue' },
            { text: 'DO', value: 'dos', color: 'green' },
            { text: 'VO', value: 'vo', color: 'pink' },
            { text: 'Request', value: 'req', color: 'red' },
          ],
        }),
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '5rem',
      align: 'left',
    },
  ];

  // 表格-按钮
  const tableActions = (record): ActionItem[] => [
    {
      icon: 'humbleicons:download',
      tooltip: '生成代码',
      popConfirm: {
        title: '生成会覆盖现有代码',
        placement: 'top',
        confirm: generateTs.bind(null, record),
      },
    },
    {
      icon: 'ph:code-bold',
      tooltip: '查看源码',
      onClick: open.bind(null, record),
    },
  ];

  // 注册表格
  const [registerTable, { reload }] = useTable({
    title: 'Domain对象列表',
    api: domainList,
    columns: tableColumns,
    useSearchForm: true, // 搜索框配置: 是否打开搜索框、搜索框配置
    formConfig: {
      labelWidth: 80,
      schemas: tableSearch,
      autoSubmitOnEnter: true,
    },
    showTableSetting: false, // 是否显示设置按钮
    size: 'small',
    bordered: true, // 是否包含边框
    showIndexColumn: true, // 是否包含序号列
    rowKey: 'id',
    pagination: {
      defaultPageSize: 10,
    },
    titleHelpMessage: '根据服务端领域对象 Ts 的对象',
  });

  // 删除
  async function open(record: Recordable) {
    const content = '```java\n' + record.source + '\n```';

    console.log(content);

    sourceDrawer.value.open({
      title: record.name + '.java',
      content: content,
      width: '70%',
    });
  }

  // 删除
  async function generateTs(record: Recordable) {
    const canonicalName = record.canonicalName;
    await domain({ canonicalName });
    reload();
  }
</script>
